<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>员工信息</title>
    <style>
      .info1{
        margin-right: 200px;
      }
      .info2{
        margin-right: 10px;
      }
    </style>
</head>
<body>
<h1>自定义分页类</h1>

  <table width="800" border="1">
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>入职时间</th>
      <th>工资</th>
      <th>奖金</th>
      <th>部门名称</th>

    </tr>
    <tr th:each="emp:${info.list}">
      <td>[[${emp.empno}]]</td>
      <td>[[${emp.ename}]]</td>
      <td>[[${emp.hiredate}]]</td>
      <td>[[${emp.sal}]]</td>
      <td>[[${emp.comm == null ? '无': emp.comm}]]</td>
      <td>[[${emp.dept != null ? emp.dept.dname : '' }]]</td>

    </tr>
  </table>
  <div>
    <span class="info1">
       共[[${info.total}]]条记录， 共[[${info.pages}]]页， 当前第[[${info.current}]]页
    </span>
    <span class="info2">
      <select id="psize">
        <option value="3" th:selected="${info.size == 3}">每页3条</option>
         <option value="5" th:selected="${info.size == 5}">每页5条</option>
         <option value="10" th:selected="${info.size == 10}">每页10条</option>
         <option value="15" th:selected="${info.size == 15}">每页15条</option>
      </select>
    </span>
    <span class="info2" th:if="${info.prepage != 0}">
      <a th:href="|/empallPage?pno=${info.prepage }&psize=${info.size}|">上一页</a>
    </span>
    <span class="info2" th:each="index:${#numbers.sequence(1, info.pages)}">
      <a th:href="|/empallPage2?pno=${index}&psize=${info.size}|">
          [[${index}]]
      </a>
    </span>
    <span class="info2" th:if="${info.nextpage != 0}">
      <a th:href="|/empallPage2?pno=${info.nextpage}&psize=${info.size}|">下一页</a>
    </span>
  </div>

<script>
  document.querySelector("#psize").onchange = function(){
    location.href="/empallPage2?psize="+this.value;
  }
</script>
</body>
</html>